import React, { useState } from "react";
import { Breadcrumb, Button, Layout, Menu, theme } from "antd";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { homee } from "../../router/Index";
import Hokk from "../../components/Hokk";
const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const name = localStorage.getItem("name");

  const naviagte = useNavigate();
  //退出登录
  const tui = () => {
    localStorage.clear("");
    naviagte("/login");
  };
  function getItem(label, key, children) {
    return {
      key,
      children,
      label,
    };
  }
  const rfdc = (arr) => {
    let items = [];
    arr &&
      arr.forEach((item) => {
        items.push(
          getItem(
            <NavLink to={`${item.path}?title${item.title}`}>
              {item.title}
            </NavLink>,
            item.path
          )
        );
      });
    return items;
  };
  const items = rfdc(homee);
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
            <Button onClick={tui}>退出登录</Button>
            <p>用户名：{name}</p>
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Hokk(App);
